<template>
  <div>
    <!-- <a-model @mousedown="onMouseDown"></a-model> -->
        <a-button type="primary" @click="showModal">
      Open Modal with async logic
    </a-button>
    <a-modal
      title="Title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      v-modalDrag
      @ok="handleOk"
      @cancel="handleCancel"
       @mousedown="onMouseDown"
    >
      <p>{{ ModalText }}</p>
    </a-modal>
  </div>
</template>
<script>
     let title = document.querySelector(".ant-modal-header") 
export default {
  data() {
    return {
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },





    onMouseDown(e) {
      console.log(e)
      // e.preventDefault();
      //记录初始移动的鼠标位置
      let startPosX = e.clientX;
      let startPosY = e.clientY;
      const { styleLeft, styleTop } = this.state; //添加鼠标移动事件
      document.body.onmousemove = (e) => {
        let left = e.clientX - startPosX + styleLeft;
        let top = e.clientY - startPosY + styleTop;
        if (this.inWindow(e.clientX, e.clientY, startPosX, startPosY)) {
          this.setState({
            styleLeft: left,
            styleTop: top,
          });
        }
      }; //鼠标放开时去掉移动事件
      document.body.onmouseup = function () {
        document.body.onmousemove = null;
      };
    },

    inWindow(left, top, startPosX, startPosY) {
      let H = document.body.clientHeight;
      let W = document.body.clientWidth;
      if (
        (left < 20 && startPosX > left) ||
        (left > W - 20 && startPosX < left) ||
        (top < 20 && startPosY > top) ||
        (top > H - 20 && startPosY < top)
      ) {
        document.body.onmousemove = null;
        document.body.onmouseup = null;
      }
    },
  },
};
</script>